<template>
  <!-- 财务售后-查看工单 -->
  <div>
    <el-card class="box-card">
      <!--查看工单banner  -->
      <div class="work-order-banner-box">
        <div>
          <p class="banner-title">您的问题咨询处</p>
          <div class="sumbit-new-question">提交新问题</div>
        </div>
        <img src="@/assets/images/work-order-banner-small.png" alt="" class="banner-small-img">
      </div>
      <!-- 查看工单-工单列表 -->
      <Title title="工单列表"></Title>
      <el-table :data="workOrderList" style="width: 100%">
        <el-table-column prop='id' label="工单id"></el-table-column>
        <el-table-column prop='type' label="类型"></el-table-column>
        <el-table-column prop='title' label="标题"></el-table-column>
        <el-table-column prop='sumbitDate' label="提交日期"></el-table-column>
        <el-table-column prop='status' label="状态">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini">未解决</el-button>
            <el-button type="success" plain size="mini">已解决</el-button>
          </template>
        </el-table-column>
        <el-table-column prop='evaluate' label="评价"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" plain size="mini">留言</el-button>
            <el-button type="danger" plain size="mini">删除</el-button>
            <el-button type="warning" plain size="mini">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination></Pagination>
      <!-- 温馨提醒 -->
      <Prompt></Prompt>
    </el-card>
  </div>
</template>

<script>
import Title from '@/views/components/Title.vue';
import Pagination from '@/views/components/Pagination.vue';
import Prompt from './components/Prompt.vue';
export default {
  components: {
    Title,
    Pagination,
    Prompt
  },
  data() {
    return {
      workOrderList: [
        {
          id: '12345623453442',
          type: '售后/产品',
          title: '为什么控制不了服务器',
          sumbitDate: '2023-03-16 19:51:37',
          status: '',
          evaluate: '购买华为云服务器',
        },
        {
          id: '12345623453443',
          type: '售后/产品',
          title: '为什么控制不了服务器',
          sumbitDate: '2023-03-16 19:51:37',
          status: '',
          evaluate: '购买华为云服务器',

        },
      ]
    }
  },
}
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
}

.work-order-banner-box {
  width: 100%;
  height: 193px;
  background: url(../../../assets/images/work-order-banner-big.png) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 30px;

  .banner-title {
    color: #157DFA;
    font-weight: 700;
    font-size: 38px;
    margin: 0;
    margin-bottom: 35px;
  }

  .sumbit-new-question {
    display: flex;
    width: 214px;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    background-color: #157DFA;
    color: #fff;
  }

  .banner-small-img {
    width: 170px;
    height: 160px;
    margin-left: 132px;
    margin-right: 60px;
  }
}
</style>